import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import * as Const from './../../const';

import {
    MessageItem
} from "./types";

interface Props {
    data: MessageItem,
    mySelf: boolean
}

class MsgText extends PureComponent<Props> {

    static defaultProps = {
        data: {},
        mySelf: false
    }

    get Data(): MessageItem {
        const {
            data
        } = this.props;
        return data;
    }

    get message() {
        const {
            text
        } = this.Data;
        return text;
    }

    get containerStyle() {
        const {
            mySelf
        } = this.props;
        const _styles = ([
            styles.container
        ])
        if (mySelf) {
            _styles.push(
                styles.redBg
            )
        }
        return _styles;
    }

    render() {
        return (
            <View style={this.containerStyle}>
                <Text style={styles.message}>
                    {this.message}
                </Text>
            </View>
        )
    }
}

export default MsgText;

const styles = StyleSheet.create({
    container: {
        borderRadius: 6,
        paddingVertical: 16,
        paddingHorizontal: 20,
        backgroundColor: `#61677C`
    },
    message: {
        fontSize: 16,
        color: `#fff`,
        lineHeight:21
    },
    redBg: {
        backgroundColor: Const.color
    }
}) as any;